<template>
  <div>
    <div>
      <van-nav-bar :title="shop.shopname" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div class="img">
        <img :src="getImg(shop.pic)">
      </div>
      <div class="foodsc">
        <div class="introduce">
          {{ shop.shopname }}
        </div>
        <div>
          <van-icon :name="[collected ? icon.name2 : icon.name]" @click="onCollect" />
        </div>
      </div>

    </div>

    <div class="foods">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="店铺菜品" name="1">
          <van-card v-for="value in list" :key="value.shop_id" :desc="value.intro" :title="value.foodname"
            :thumb="getImg(value.pic)" tag="热销" @click="goto(value.food_id)">
            <template #price>
              ￥{{ value.price }}
            </template>
          </van-card>
        </van-collapse-item>

      </van-collapse>

    </div>

  </div>
</template>

<script setup>
import { ref,onMounted,reactive } from 'vue';
import { getShopsDetailApi,getFoodsApi,userCollectShopApi,isCollectedApi } from '@/api';
import { useRoute,useRouter } from 'vue-router'; 
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
const route =useRoute();
const router =useRouter();
const shop =ref({});
const list =ref([]);
const icon =ref({name:'like-o',name2:'like'})
const collected=ref(false);
const activeNames = ref(['1']);
const getShopsDetail = async e => {
    const res = await getShopsDetailApi(e);
    shop.value=res;
    // 在这里也可以写报错判断：try{}catch(){}
  };
  const getFoodsList = async e => {
    const res = await getFoodsApi(e);
    list.value.push(...res);
  };
  const isCollected = async e => {
    const res = await isCollectedApi(e);
    if(res.collected==='0'){
      collected.value=false;
    }
    if(res.collected==='1'){
      collected.value=true;
    }
  };
  const userCollectShop = async e => {
    const res = await userCollectShopApi(e);
    collected.value=!collected.value;
    // list.value.push(...res);
  };
const onCollect =()=>{
  userCollectShop({userId:store.userId,shopId:route.params.shopId})
}
onMounted(()=>{
    getShopsDetail(route.params.shopId)
    getFoodsList(route.params.shopId)
    isCollected({userId:store.userId,id:route.params.shopId,flag:0})
})
const goto =e=>{
    router.push({
        path:'/detail',
      query:{
        foodId:e
      }
    });
}
const onClickLeft = () => {
router.back()
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}
.content .img {
  width: 90%;
  height: 240px;
  margin: 5px auto;
  border: 1px solid #ccc;
  border-radius: 20px;
}
.content .img img{
  width: 100%;
  height: 100%;
  
  border-radius: 20px;
}
.introduce{
  margin-left: 10px;
  font-size: 25px;
}
.title{
  font-size: 20px;
  margin-left: 10px;
  margin-top: 10px;
  color: #a00;
}
:deep(.van-tag--primary){
background-color: #e00;
}
.foodsc{
  margin: 0 20px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-icon {
  color: #f00;
  font-size:20px ;
}
:deep(.van-card__price){
  font-weight: normal;
  color: #f00;
  font-size:18px ;
}
</style>